import { useState, useEffect } from 'react'

// 导入二哈图片
import dog from './assets/erha.jpg'

// 自定义 Hook
// 使用场景：将组件状态逻辑提取到可重用的函数(自定义 Hooks 中)，实现状态逻辑复用
// 内置 Hooks 为函数组件赋予了 class 组件的功能
// 自定义 Hooks 针对不同的组件实现状态逻辑的复用

// 封装一个自定义的 Hooks，实现鼠标坐标点的复用
// 自定义 Hooks 是一个函数，约定函数的名称以 use 开头
// React 就是通过函数名称是否以 use 开头来判断是不是 Hooks
// Hooks 只能在函数组件总或者其他自定义 Hooks 中使用，否则，会报错
// 自定义 Hooks 用来提取组件的状态逻辑，根据不同的业务功能有不同的参数和返回值，和普通函数一样
function useMouse() {
  const [point, setPoint] = useState({ x: 0, y: 0 })

  const handle = (e: MouseEvent) => {
    const newPoint = {
      x: e.clientX,
      y: e.clientY
    }
    setPoint(newPoint)
  }

  // 监听鼠标坐标点的值
  useEffect(() => {
    // 监听鼠标移动事件
    window.addEventListener('mousemove', handle)

    // 销毁鼠标移动事件
    return function () {
      window.removeEventListener('mousemove', handle)
    }
  }, [])

  return point
}

// 坐标点组件
function Point() {
  // 获取返回的数据
  const mouse = useMouse()

  return (
    <div>
      {mouse.x} -- {mouse.y}
    </div>
  )
}

// 跟随鼠标移动的哈士奇
function CatMouse() {
  // 获取返回的数据
  const mouse = useMouse()

  return (
    <img
      src={dog}
      style={{
        width: '100px',
        height: '100px',
        position: 'absolute',
        borderRadius: '50%',
        top: mouse.y - 50,
        left: mouse.x - 50
      }}
      alt=""
    />
  )
}

function App() {
  return (
    <div>
      <Point />
      <CatMouse />
    </div>
  )
}

export default App
